<template>
    <div>
        <div class="tab_bar">
            <span class="types" :class="{active:tag=='0'}" @click="tag='0'">全部</span>
            <span class="types" :class="{active:tag=='7'}" @click="tag='7'">华语</span>
            <span class="types" :class="{active:tag=='96'}" @click="tag='96'">欧美</span>
            <span class="types" :class="{active:tag=='8'}" @click="tag='8'">日本</span>
            <span class="types" :class="{active:tag=='16'}" @click="tag='16'">韩国</span>
        </div>
        <div class="table_card">
            <table class="el-table">
                <thead>
                <th width="5%"></th>
                <th width="15%"></th>
                <th width="20%">音乐标题</th>
                <th width="20%">歌手</th>
                <th width="30%">专辑</th>
                <th width="10%">时长</th>
                </thead>
                <tbody>
                <tr v-for="(item,index) in tableData" :key="index">
                    <td>{{index+1}}</td>
                    <td class="img_column">
                        <img :src="item.album.picUrl" alt="">
                        <span class="el-icon-video-play play-but" @click="playMusic(item.id)"></span>
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{item.artists[0].name}}</td>
                    <td>{{item.album.name}}</td>
                    <td>{{item.duration}}</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</template>

<script>
    //导入axios
    import axios from 'axios';
    export default {
        name: "newMusic",
        data(){
            return{
                tag:'0',
                tableData:[],
            }
        },
        watch:{
            tag(){
              this.getTable();
            }

        },
        created() {
            this.getTable();

    },
        methods:{
            getTable(){
                axios({
                    url:'https://autumnfish.cn/top/song',
                    method:'get',
                    params:{
                        type:this.tag,
                    }
                }).then(response=>{
                   // console.log(response);
                    this.tableData=response.data.data;
                    for(let i=0;i<this.tableData.length;i++)
                    {   //将获取到的毫秒转化为分+秒
                        let duration=this.tableData[i].duration;
                        let min=parseInt(duration/1000/60);
                        let second=parseInt(duration/1000%60);
                        if(min<10)
                            min='0'+min;
                        if(second<10)
                            second='0'+second;
                        this.tableData[i].duration=`${min}:${second}`;
                    }
                })
            },
            playMusic(id){
                axios({
                    url:'https://autumnfish.cn/song/url',
                    method:'get',
                    params:{
                        id:id,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.$parent.musicUrl=response.data.data[0].url;
                })

            }
        },
    }
</script>

<style scoped>
    img{
        width: 100%;
        height: 100%;
    }
    .tab_bar{
        position: relative;
        width: 90%;
        height: 30px;
        left: 5%;
        top:10px;
        display: flex;
        justify-content: flex-end;
    }
    .tab_bar .types{
        color: grey;
        font-size: 16px;
        margin-right: 20px;
        cursor:pointer;
    }
    .tab_bar .types.active{
        color: crimson;
    }
    .table_card{
        position: relative;
        width: 90%;
        left: 5%;
    }
    .img_column>img{
        width: 100px;
        height: 100px;
    }
    .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        left: 30px;
        top:40px;
        font-size:40px;
        color: sandybrown;
        cursor: pointer;
    }
    .el-table td, .el-table th{
        padding: 12px 10px;
    }

</style>